*{
    padding: 0px;
    margin: 0px;
}
body{
    background: #FAFAFA;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
// 头部
header{
    background: #F8F9FA;
    box-shadow: 0 3px 0px #41A8A5;
    border-bottom: solid 1px #41A8A5;
    overflow: auto;
    width: 100%;
    margin: 0 auto;
    nav{
        padding: 21px;
        width: 60%;
        margin: 0 auto;
        div:first-of-type{
            padding: 0px 18px 5px 5px;
            font-size: 20px;
            color: #17a2b8;
            font-weight: bold;
            float: left;
            cursor: pointer;
        }
        div:first-of-type:hover{
            color: #04434d;
        }
        .login{
            padding: 0px 50px 21px 0px;
            box-sizing: border-box;
            float: right;
            width: 15%;
            button{
                font-size: 14px;
                padding: 4px 6px 4px 6px;
                color: #ffffff;
                background: #17a2b8;
                outline: none;
                margin-left: 2px;
                border: 1px solid #17a2b8;
                border-radius: 4px;
                text-align: center;
                cursor: pointer;
            }
            button:nth-child(2){
                background: #ffffff;
                color: #17a2b8;
            }
            button:hover{
                background: #0c606d;
                color: #ffffff;
                border: 1px solid #0c606d;
            }
        }
        ul{
            float: left;
            li{
                float: left;
                a{
                    color: rgba(0,0,0,.5);
                    font-size: 17px;
                    font-weight: bold;
                    padding: 7.5px;
                    box-sizing: border-box;
                    text-decoration: none;
                }
                a:hover{
                    color: rgba(0,0,0);
                }
            }
        }
        
    }
}

// 顶部介绍
aside{
    width:52.5%;
    padding: 3rem;
    margin: 0 auto;
    border: 1px solid #dddddd;
    margin-top: 3rem;
    background: #FFFFFF;
    box-shadow: 0 2px 5px #dddddd;
        h2{
            color: #6c757d;
            font-weight: 400;
            padding-bottom:10px;
        }
        p{
            padding: 16px 5px;
            background: #F8F9FA;
            font-size: 15px;
            color: #6c757d;
        }
}

// 主要内容
article{
    width:52.5%;
    border: 1px solid #dddddd;
    box-shadow: 0 2px 5px #dddddd;
    margin: 10px auto;
    padding: 3rem;
    background: #ffffff;
    h2{
        border-bottom: 1px solid #dddddd;
        padding-bottom: 10px;
        color: #6c757d;
        font-weight: 400;
    }
    ul>li{
        width: 100%;
        padding: 16px 0px;
        border-bottom: 1px solid #dddddd;
        overflow: auto;
        a{
            text-decoration: none;
            color: #999999;
            font-size: 15px;
            float: left;
        }
        a:hover{
            color: #04434d;
        }
        span{
            color: #999999;
            font-size: 12px;
            float: right;
        }
        
    }
}
// 底部
footer{
    width: 100%;
    margin: 10px auto;
    border-top: 1px solid #dddddd;
    line-height: 2em;
    text-align: center;
    padding: 30px;
    color: #6c757d;
    margin-top: 30px;
    font-size: 15px;
}